<template>
  <div class="basis">
    <div class="title">{{message}}</div>
    <div class="mui-content">
      <div class="mui-row">
        <div class="listArray mui-col-sm-6 mui-col-xs-12" v-for="(item,index) in listArray">
          <li class="mui-table-view-cell" @click="RouterFun(item.path)">
            <a class="mui-navigate-right">
              {{item.text}}
            </a>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "basis",
    data() {
      return {
        listArray: [
          {
            "path": "./Vonce",
            "text": this.$t('Vonce')
          },
          {
            "path": "./ifAndFor",
            "text": this.$t('ifAndFor')
          },
          {
            "path": "./computed",
            "text": this.$t('computed')
          },
          {
            "path": "./from",
            "text": this.$t('from')
          },
          {
            "path": "./component",
            "text": this.$t('component')
          },
          {
            "path": "./DynamiComponent",
            "text": this.$t('DynamiComponent')
          },
        ],
        message: this.$t('PageLoad')+"：" + new Date().toLocaleString()
      }
    },
    methods: {
      RouterFun(path) {
        this.$router.push({'path': path})
      }
    }
  }
</script>

<style scoped lang="scss">
  .basis {
    width: 100%;
    padding: 16px;
    .title {
      width: 100%;
      margin-bottom: 10px;
    }

    .mui-content {
      background: white;
      .listArray {
        border-bottom: 1px solid #f3f3f3;
      }
      .listArray:last-child {
        border: none;
      }
    }
  }
</style>
